<template>
    <div class="m-content">
        <h3>欢迎来到博客</h3>
        <div>
            <el-avatar :size="50" :src="user.avatar"></el-avatar>
            <div> {{ user.username }} </div>
        </div>
        <div class="maction">
            <span><el-link href="/blogs">主页</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span><el-link type="success" @click="blogAdd">发表博客</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span v-show="!isLogin"><el-link type="primary" @click="login">登陆</el-link></span>
            <span v-show="isLogin"><el-link type="danger" @click="logout">退出</el-link></span>
        </div>
    </div>
</template>
<script>
export default {
    name: "Header",
    data() {
        return {
            user: {
                username: '登陆',
                avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            },
            isLogin: false
        }
    },
    methods: {
        logout() {
            const _this = this;
            _this.$axios.get('/logout').then(res => {
                _this.isLogin = false
                _this.$store.commit('removeTokenUserInfo')
                _this.$router.push('/login')
            });
        },
        login() {
            this.$router.push('/login')
        },
        blogAdd() {
            if(this.isLogin) {
                this.$router.push('/blog/add')
            } else {
                this.$router.push('/login')
            }
        }
    },
    created() {
        var user = this.$store.getters.getUserInfoCache;
        //console.log('user', user)
        if(user && user.username) {
            this.user.username = user.username
            if(user.avatar) this.user.avatar = user.avatar
            this.isLogin = true
        }
    }
}
</script>
<style scoped>
/* .m-content {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
} */
.maction {
    margin: 10px 0;
}
</style>